{include file="public/header"/}
<script src="{__PUBLIC_PATH}/common/js/jquery.min.js?v={$version}"></script>
<script src="{__PUBLIC_PATH}/admin/pcf/global.js?v={$version}"></script>
</head>
<body>
<style type="text/css" media="screen">
.layui-table-cell {height:30px!important;}
</style>
<div class="layui-fluid" id="LAY-component-layer-list">
    <div class="layui-card">
        <div class="layui-card-body table-tool-mini">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <a href="{:url('/channel.type/index')}" class="layui-btn layui-btn-primary input-btn-back"><i class="layui-icon layui-icon-left"></i></a>
                        <button class="layui-btn icon-btn" data-url="{:url('/channel.field/channel_add', array('channel_id'=>$channel_id))}" data-type="channel_add"><i class="layui-icon">&#xe654;</i>新增栏目字段</button>
                    </div>
                </div>
            </div>
            <table id="tablelist" lay-filter="tablelist"></table>
        </div>
    </div>
</div>
<script type="text/html" id="oper-col">
    {{# if(d.ifcontrol == 1){ }}
     <a class="layui-btn layui-btn-primary layui-btn-sm" style="color:#ccc;cursor:not-allowed;background-color:#e6e6e6;">编辑</a>
    {{# }else{ }}
    <a class="layui-btn layui-btn-primary layui-btn-sm" data-channelid="{{d.pcfchannel_id}}" data-id="{{d.id}}" data-type="channel_edit">编辑</a>
    {{# } }}
    <a class="layui-btn layui-btn-sm" href="javascript:void(0);" data-name="{{d.name}}" data-dtype="{{d.dtype}}" data-type="copyToClipBoard">标签调用</a>
    {{# if(d.ifsystem == 1 || d.ifcontrol == 1){ }}
     <a class="layui-btn layui-btn-danger layui-btn-sm" style="color:#ccc;cursor:not-allowed;background-color:#e6e6e6;">删除</a>
    {{# }else{ }}
    <a class="layui-btn pcf-event layui-btn-danger layui-btn-sm" data-channelid="{{d.pcfchannel_id}}" data-id="{{d.id}}" data-type="channel_del">删除</a>
    {{# } }}
</script>
{include file="public/footer"/}
<script>
    layui.use(['layer', 'form', 'table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        // 渲染表格
        var insTb = table.render({
            elem: '#tablelist',
            url: "{:url('/channel.field/channel_index',array('channel_id'=>$channel_id))}",
            page: true,
            toolbar: false,
            cellMinWidth: 100,
            cols: [[
                {field:'id',title:'ID',width:80},
                {field: 'title',title: '字段标题'},
                {field: 'name',title: '字段名称',width:180},
                { templet: function (d) {
                    if (d.dtypename) {
                       var html1 = d.dtypename;
                    } else {
                       var html1 = '数据错误';
                    }
                    return html1;
                },title: '字段类型',width:150},
                {templet: function (d) {
                    if (d.ifsystem == 1 && d.ifmain == 1) {
                       var html1 = '系统';
                    } else {
                       var html1 = '自定义';
                    }
                    return html1;
                },title: '字段分类',width:100,align: 'center'},
                {field: 'status', templet: function (d) {
                    if (d.ifcontrol == 1) {
                       var html2 = '——';
                    } else {
                        if(d.ifeditable == 1){
                           var html2 = '<input type="checkbox" lay-skin="switch" lay-filter="ckStateUser" data-id="'+d.id+'" value="'+d.ifeditable+'" lay-text="是|否" checked>';
                        }else{
                            var html2 = '<input type="checkbox" lay-skin="switch" lay-filter="ckStateUser" data-id="'+d.id+'" value="'+d.ifeditable+'" lay-text="是|否">';
                        }
                    }
                    return html2;
                },width: 100, title: '状态',align: 'center'},
                {field: 'update_time', title: '更新时间',width:200},
                {title: '排序',align: 'center',templet: function (d) {
                    if(d.sort_order){
                       var html = "<input type='text' size='4' data-id='"+d.id+"' value='"+d.sort_order+"' id='sort_order' class='layui-input' style='height:28px;'/>";
                    }else{
                       var html = ""+d.sort_order+""; 
                    }
                    return html;
                }, width: 80},
                {align: 'center', toolbar: '#oper-col', title: '操作', width: 250}
            ]]
        });

        $(document).on("click","#LAY-component-layer-list .layui-btn",function(){
          var type = $(this).data('type');
          active[type] && active[type].call(this);
        });

        //触发事件
        var active = {
            channel_add: function(){
                var iframes = layer.open({
                    type: 2,
                    title: '新增字段',
                    fixed: true,
                    shadeClose: false,
                    shade: 0.3,
                    content: $(this).data('url')
                });
                layer.full(iframes);
            },
            channel_edit: function(){
                var obj = this;
                var id = $(obj).attr('data-id');
                var channelid = $(obj).attr('data-channelid');
                var iframes = layer.open({
                    type: 2,
                    title: '编辑字段',
                    fixed: true,
                    shadeClose: false,
                    shade: 0.3,
                    content: '{:url("/channel.field/channel_edit")}?channel_id='+channelid+'&id='+id
                });
                layer.full(iframes);
            },
            channel_del: function(){
                var obj = this;
                var id = $(obj).attr('data-id');
                var channelid = $(obj).attr('data-channelid');
                layer.msg('数据将无法恢复，确认删除？', {
                    btnAlign: 'c',
                    time: 0,
                    btn: ['确定', '取消'],
                    yes: function(index, layero){
                      layer.close(index);
                      layer.msg('正在处理请勿刷新页面', {icon: 16,shade: 0.01,time:3600000});
                      $.ajax({
                        type : 'post',
                        url : '{:url("/channel.field/channel_del")}?channel_id='+channelid,
                        data : {del_id:id},
                        dataType : 'json',
                        success : function(res){
                          layer.closeAll('loading');
                          if(res.status){
                            layer.msg(res.msg, {icon: 1, time:1000}, function(){
                              window.location.reload();
                            });
                          }else{
                            layer.msg(res.msg, {icon: 2, time: 1000});
                          }
                        },error: function(e){
                          layer.closeAll('loading');
                          layer.msg("未知错误，操作中断！", {icon: 2, time: 1000});
                        }
                      })
                    }
                });
            },
            copyToClipBoard : function(){
                var obj = this;
                var fieldname = $(obj).attr('data-name');
                var channel_id = $(obj).attr('data-channel_id');
                var dtype = $(obj).attr('data-dtype');
                var ifmain = $(obj).attr('data-ifmain');
                var height = '280px';
                var contentdiv = '<div class="dialog_content" style="margin:0px;padding:0px;"><dl style="padding:10px 30px;line-height:30px;">';
                if (6 == channel_id) {
                    switch(dtype)
                    {
                        case 'imgs':
                            {
                                height = '400px';
                                var viewstr = "{gzpcf:diyfield type='"+dtype+"' id='"+fieldname+"' name='$"+"gzpcf.field."+fieldname+"'}\r\n<img src='{$"+fieldname+".image_url}'/>\r\n{/gzpcf:diyfield";
                                contentdiv += '<dd>列表/内容页：</dd>';
                                contentdiv += '<dd><textarea rows="4" cols="60" style="width:470px;height:60px;" class="layui-textarea">' + viewstr + '}</textarea></dd>';
                                var liststr = "{gzpcf:type typeid='栏目ID' id='field' addfields='"+fieldname+"'}\r\n{gzpcf:diyfield type='"+dtype+"' id='"+fieldname+"' name='$"+"field."+fieldname+"'}\r\n <img src='{$"+fieldname+".image_url}' />\r\n    {/gzpcf:diyfield"+"}\r\n{/gzpcf:type";
                                contentdiv += '<dd>标签 arclist / list 内调用 <font color="red">(更多简洁调法请参考标签 arclist /list)</font>：</dd>';
                                contentdiv += '<dd><textarea rows="4" cols="60" style="width:470px;height:140px;" class="layui-textarea">' + liststr + '}</textarea></dd>';
                            }
                            break;
                        case 'checkbox':
                            {
                                height = '400px';
                                var viewstr = "{gzpcf:diyfield type='"+dtype+"' id='"+fieldname+"' name='$"+"gzpcf.field."+fieldname+"'}\r\n{$"+fieldname+".value}\r\n{/gzpcf:diyfield";
                                contentdiv += '<dd>列表/内容页：</dd>';
                                contentdiv += '<dd><textarea rows="4" cols="60" style="width:470px;height:60px;" class="layui-textarea">' + viewstr + '}</textarea></dd>';

                                var liststr = "{gzpcf:type typeid='栏目ID' id='field' addfields='"+fieldname+"'}\r\n{gzpcf:diyfield type='"+dtype+"' id='"+fieldname+"' name='$"+"field."+fieldname+"'}\r\n        {$"+fieldname+".value}\r\n    {/gzpcf:diyfield"+"}\r\n{/gzpcf:type";
                                contentdiv += '<dd>标签 arclist / list 内调用 <font color="red">(更多简洁调法请参考标签 arclist /list)</font>：</dd>';
                                contentdiv += '<dd><textarea rows="4" cols="60" style="width:470px;height:140px;" class="layui-textarea">' + liststr + '}</textarea></dd>';
                            }
                            break;
                        case 'datetime':
                            {
                                contentdiv += '<dd>列表/内容页：</dd>';
                                contentdiv += '<dd><input type="text" style=" width:470px;margin-bottom:10px;" value="{$'+'gzpcf.field.'+fieldname+'|MyDate=\'Y-m-d H:i:s\',###}" class="layui-input"></dd>';
                                var liststr = "{gzpcf:type typeid='栏目ID' addfields='"+fieldname+"'}\r\n{$"+"field."+fieldname+"|MyDate=\'Y-m-d H:i:s\',###}\r\n{/gzpcf:type";
                                contentdiv += '<dd>标签 type 属性 addfields 调用：</dd>';
                                contentdiv += '<dd><textarea rows="4" cols="60" style="width:470px;height:60px;" class="layui-textarea">' + liststr + '}</textarea></dd>';
                            }
                            break;
                        default:
                            {
                                contentdiv += '<dd>列表/内容页：</dd>';
                                contentdiv += '<dd><input type="text" style=" width:470px;margin-bottom:10px;" value="{$'+'gzpcf.field.'+fieldname+'}" class="layui-input"></dd>';
                                var liststr = "{gzpcf:type typeid='栏目ID' addfields='"+fieldname+"'}\r\n{$"+"field."+fieldname+"}\r\n{/gzpcf:type";
                                contentdiv += '<dd>标签 type 属性 addfields 调用：</dd>';
                                contentdiv += '<dd><textarea rows="4" cols="60" style="width:470px;height:60px;" class="layui-textarea">' + liststr + '}</textarea></dd>';
                            }
                            break;
                    }
                } else {
                    switch(dtype)
                    {
                        case 'imgs':
                            {
                                height = '400px';
                                var viewstr = "{gzpcf:diyfield type='"+dtype+"' id='"+fieldname+"' name='$"+"gzpcf.field."+fieldname+"'}\r\n<img src='{$"+fieldname+".image_url}'/>\r\n{/gzpcf:diyfield";
                                contentdiv += '<dd>内容页：</dd>';
                                contentdiv += '<dd><textarea rows="4" cols="60" style="width:470px;height:60px;" class="layui-textarea">' + viewstr + '}</textarea></dd>';
                                var liststr = "{gzpcf:arcview aid='$"+"field.aid' id='field' addfields='"+fieldname+"'}\r\n{gzpcf:diyfield type='"+dtype+"' id='"+fieldname+"' name='$"+"field."+fieldname+"'}\r\n        <img src='{$"+fieldname+".image_url}' />\r\n    {/gzpcf:diyfield"+"}\r\n{/gzpcf:arcview";
                                contentdiv += '<dd>标签 arclist / list 内调用 <font color="red">(更多简洁调法请参考标签 arclist /list)</font>：</dd>';
                                contentdiv += '<dd><textarea rows="4" cols="60" style="width:470px;height:140px;" class="layui-textarea">' + liststr + '}</textarea></dd>';
                            }
                            break;
                        case 'checkbox':
                            {
                                height = '400px';
                                var viewstr = "{gzpcf:diyfield type='"+dtype+"' id='"+fieldname+"' name='$"+"gzpcf.field."+fieldname+"'}\r\n{$"+fieldname+".value}\r\n{/gzpcf:diyfield";
                                contentdiv += '<dd>内容页：</dd>';
                                contentdiv += '<dd><textarea rows="4" cols="60" style="width:470px;height:60px;" class="layui-textarea">' + viewstr + '}</textarea></dd>';
                                var liststr = "{gzpcf:arcview aid='$"+"field.aid' id='field' addfields='"+fieldname+"'}\r\n{gzpcf:diyfield type='"+dtype+"' id='"+fieldname+"' name='$"+"field."+fieldname+"'}\r\n        {$"+fieldname+".value}\r\n    {/gzpcf:diyfield"+"}\r\n{/gzpcf:arcview";
                                contentdiv += '<dd>标签 arclist / list 内调用 <font color="red">(更多简洁调法请参考标签 arclist /list)</font>：</dd>';
                                contentdiv += '<dd><textarea rows="4" cols="60" style="width:470px;height:140px;" class="layui-textarea">' + liststr + '}</textarea></dd>';
                            }
                            break;
                        case 'datetime':
                            {
                                contentdiv += '<dd>内容页：</dd>';
                                contentdiv += '<dd><input type="text" style=" width:470px;margin-bottom:10px;" value="{$'+'gzpcf.field.'+fieldname+'|MyDate=\'Y-m-d H:i:s\',###}" class="layui-input"></dd>';
                                if (1 == ifmain || 2 == ifmain) {
                                    contentdiv += '<dd>标签 arclist / list 内调用：</dd>';
                                    contentdiv += '<dd><input type="text" style=" width:470px;margin-bottom:10px;" value="{$'+'field.'+fieldname+'|MyDate=\'Y-m-d H:i:s\',###}" class="layui-input"></dd>';
                                } else {
                                    var liststr = "gzpcf:field aid='$"+"field.aid' addfields='"+fieldname+"'/";
                                    contentdiv += '<dd>标签 arclist / list 内调用：</dd>';
                                    contentdiv += '<dd><input type="text" style=" width:470px;margin-bottom:10px;" value="{'+liststr+'}" class="layui-input"></dd>';
                                }
                            }
                            break;
                        default:
                            {
                                contentdiv += '<dd>内容页 -- '+'{$'+'gzpcf.field.'+fieldname+'_unit'+'}为单位：</dd>';
                                contentdiv += '<dd><input type="text" style=" width:470px;margin-bottom:10px;" value="{$'+'gzpcf.field.'+fieldname+'}{$'+'gzpcf.field.'+fieldname+'_unit'+'}" class="layui-input"></dd>';
                                if (1 == ifmain || 2 == ifmain) {
                                    contentdiv += '<dd>标签 arclist / list 内调用：</dd>';
                                    contentdiv += '<dd><input type="text" style=" width:470px;margin-bottom:10px;" value="{$'+'field.'+fieldname+'}" class="layui-input"></dd>';
                                } else {
                                    var liststr = "gzpcf:field aid='$"+"field.aid' addfields='"+fieldname+"'/";
                                    contentdiv += '<dd>标签 arclist / list 内调用：</dd>';
                                    contentdiv += '<dd><input type="text" style=" width:470px;margin-bottom:10px;" value="{'+liststr+'}" class="layui-input"></dd>';
                                }
                            }
                            break;
                    }
                }
                contentdiv += '<dd style="border-top:dotted 1px #E7E7E7;color:#F60;">请将相应标签复制并粘贴到对应模板文件中！</dd></dl></div>'
                parent.layer.open({
                    title: '标签调用',
                    type: 1,
                    skin: 'layui-layer-demo',
                    area: ['550px', height], //宽高
                    content: contentdiv
                });
            }
        };

        // 监听排序
        $(document).on("change","#LAY-component-layer-list #sort_order",function(){
            var dataid = $(this).attr('data-id');
            var pcfurl = '{:url("/index/changeTableVal")}';
            changeTableVal('channelfield','id',dataid,'sort_order',this,pcfurl);
            self.window.location.reload();
        })

        //修改状态
        form.on('switch(ckStateUser)', function (data) {
            var obj = data.elem;
            if (obj.checked) {
                data.value = 1;
            } else {
                data.value = 0;
            }
            var ifeditable = data.value;
            $.get("{:url('/channel.field/ajax_channel_show')}", {id: $(obj).attr('data-id'),state:ifeditable}, function (res) {
                layer.closeAll('loading');
                if (res.status) {
                    layer.msg(res.msg, {icon: 1, time:1000});
                } else {
                    layer.msg(res.msg, {icon: 2, time:1000});
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            }, 'json');
        })

    });
</script>
</body>
</html>